﻿@page "/Calendar/Date-Range"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
   <p>In the following sample, a specific date ranges from 5th to 27th of a month has been set to select from the Calendar. All the other dates are out of range, and <code>restricted</code> to set or select.</p>
</SampleDescription>
<ActionDescription>
    <p>Date Range sample explains the date selection within a specific range in a calendar by using the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Min' target='_blank'> Min</a> and <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.CalendarBase-1.html#Syncfusion_Blazor_Calendars_CalendarBase_1_Max' target='_blank'> Max</a> properties. Here, the date selection range was restricted between 5th to 27th.</p>
    <p>More information on the date range restriction can be found in this<a href='https://blazor.syncfusion.com/documentation/calendar/date-range/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="calender-section">
        <div id="calender-control">
            <SfCalendar TValue="DateTime?" Min="@MinDate" Max="@MaxDate" @bind-Value="@DropVal"></SfCalendar>
        </div>
        <div id="display_date">
            <span id="date_value">Selected values: @(DropVal?.ToString("M/d/yyyy"))</span>
        </div>
    </div>
</div>

<style>
    #calender-control {
        max-width: 300px;
        margin: 0 auto;
    }

    #display_date {
        max-width: 300px;
        margin: 0 auto;
        padding-top: 10px;
        color: rgba(0, 0, 0, 0.8);
    }
</style>

@code {
    public DateTime MinDate { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 05);
    public DateTime MaxDate { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 27);
    public DateTime? DropVal { get; set; } = DateTime.Now;

}